<script setup>
import MoniterItem from "@/components/MoniterItem.vue";

</script>

<template>
  <MoniterItem title="不同场所监控数量统计" style="width: 100%;">
    <template #content>
      <div style="height: 100%" ref="siteMonitoring" id="siteMonitoring"></div>
    </template>
  </MoniterItem>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "siteMonitoring",
  data(){
    return{

    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      const myChart = echarts.init(
        document.getElementById("siteMonitoring")
      );
      let xdata =  ["方舱", "高速口", "卡口", "主干道", "重点医院", "隔离点", "商超", "餐饮"]
      let seriesData = [2589,655,509,368,310,304,255,236]
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: '#0D68CE',
          borderColor:'#0D68CE',
          textStyle: {
            color: '#fff'
          },
          formatter: (param) => {
            let result = `<div>${param[0].name}:<span style="color:#20CEFF;">${param[0].value}</span>个</div>`
            return result
          }
        },
        grid: {
          top: "30",
          left: "1%",
          right: "3%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [{
          type: "category",
          IsStaggered: "",
          data: xdata,
          axisPointer: {
            type: "shadow"
          },
          axisLabel: {
            color: "#A9D3FC",
            fontSize: 12,
            fontFamily: "Arial",
            margin: 7,
            interval: 0,
            rotate: 0,
            formatter: function (params) {
              var newParamsName = "";// 最终拼接成的字符串
              var paramsNameNumber = params.length;// 实际标签的个数
              var provideNumber = 2;// 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";// 表示每一次截取的字符串
                  var start = p * provideNumber;// 开始截取的位置
                  var end = start + provideNumber;// 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;// 最终拼成的字符串
                }

              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.25)"
            }
          },
          axisTick: {
            show: false
          }
        }],
        yAxis: [{
          show: true,
          type: "value",
          name: "单位:个",
          nameTextStyle: {
            color: "rgba(255,255,255,0.84)",
            fontSize: 12,
            padding: [0, 0, 0, -15]
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.25)",
              width: 1
            }
          },
          axisLabel: {
            formatter: "{value}",
            color: "#A9D3FC",
            fontSize: 12,
            fontFamily: "Arial",
            margin: 7
          },
          minInterval: 0,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.25)"
            }
          }
        },
          {
            show: false,
            type: "value",
            name: "",
            minInterval: 0,
            axisLabel: {
              formatter: "{value}",
              color: "#ffffff",
              fontSize: 12,
              fontFamily: "Arial",
              margin: 7
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(23,225,177,0.12)",
                width: 1
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#49D9FE"
              }
            }
          }],
        series: [{
          name: "",
          type: "bar",
          stack: "total_0",
          data: seriesData,
          yAxisIndex: 0,
          label: {
            show: false,
            position: "top",
            color: "#6e7079",
            fontSize: 10
          },
          barWidth: 15,
          itemStyle: {
            normal: {
              color: {
                colorStops: [{
                  offset: 1,
                  color: "#21D0FF"
                },
                  {
                    offset: 0,
                    color: "#007BFA"
                  }],
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                type: "linear",
                global: false
              }
            }
          }
        }]
      }
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>

</style>
